<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./form.css">
</head>
<body>
    <div class="add">
        <div class="add-1">
        <h1>新增表单</h1>
        姓名: <input name="name" type="text"><br>
        电话: <input name="phone" type="text"><br>
        年龄: <input name="age" type="text"><br>
        学历: <input name="xueli" type="text"><br>
        薪资: <input type="text" name="xinzi"><br>
        <button name="add">确定</button> 
        </div>     
    </div>
    <table class="tab">
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>联系电话</td>
                <td>年龄</td>
                <td>学历</td>
                <td>期望薪资</td>
                <td>删除</td>
                <td>修改</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div class="msgBox">
            <div class="msgBox-1">
            <h1>修改表单</h1>
            姓名: <input name="name" type="text"><br>
            电话: <input name="phone" type="text"><br>
            年龄: <input name="age" type="text"><br>
            学历: <input name="xueli" type="text"><br>
            薪资: <input type="text" name="xinzi"><br>
            <button name="yes">保存</button>
            <button name="no">取消</button>
            </div>
    </div>

    <script>
        
        var arr = [
            {id:1,name:'张朋鸟',phone:'12345',age:18,xueli:'家里蹲',xinzi:15000},
            {id:2,name:'张朋鸟',phone:'54321',age:19,xueli:'佳丽吨',xinzi:15000},
            {id:3,name:'张朋鸟',phone:'13524',age:20,xueli:'加里鐓',xinzi:15000},
            {id:4,name:'张朋鸟',phone:'24135',age:21,xueli:'嘉丽遁',xinzi:15000},
            {id:5,name:'张朋鸟',phone:'15324',age:22,xueli:'加力敦',xinzi:15000},
            {id:6,name:'张朋鸟',phone:'12312',age:23,xueli:'嘉里顿',xinzi:15000},
        ];
        
        var oTab = document.querySelector('.tab');
        var oTbody = oTab.querySelector('tbody');
        var MsgBox = document.querySelector('.msgBox');
        var Oadd = document.querySelector('.add');

        var Name = MsgBox.querySelector('[name="name"]');
        var Phone = MsgBox.querySelector('[name="phone"]');
        var Age = MsgBox.querySelector('[name="age"]');
        var Xueli = MsgBox.querySelector('[name="xueli"]');
        var Xinzi = MsgBox.querySelector('[name="xinzi"]')



        var AddName = Oadd.querySelector('[name="name"]');
        var AddPhone = Oadd.querySelector('[name="phone"]');
        var AddAge = Oadd.querySelector('[name="age"]');
        var AddXueli = Oadd.querySelector('[name="xueli"]');
        var AddXinzi = Oadd.querySelector('[name="xinzi"]')

        var Yes = MsgBox.querySelector('[name="yes"]');
        var No = MsgBox.querySelector('[name="no"]');

        var index ;

        var AddYes = Oadd.querySelector('[name="add"]'); 
        
        // console.log(oTbody,oTab);
        function setPage( array ){
            var str = '';
            array.forEach(function(item,key){
                str += `
                    <tr>
                        <td>${item.id}</td>    
                        <td>${item.name}</td>    
                        <td>${item.phone}</td>    
                        <td>${item.age}</td>    
                        <td>${item.xueli}</td> 
                        <td>${item.xinzi}</td>
                        <td><button name="del" index="${key}" style="background-color: greenyellow;border:0;width:50px;height:30px;color:white;">删除</button></td>   
                        <td><button name="edit" index="${key}" style="background-color: red;border:0;width:50px;height:30px;color:white;">修改</button></td>   
                    </tr>
                `;
            })
            return str;
        }
        
        oTbody.innerHTML = setPage( arr );

        

        
        oTbody.addEventListener('click' , function(event){
           
            if(event.target.getAttribute('name') === 'del'){
                
                var bool = window.confirm('您确定要删除吗?');

                if( !bool ) return 

                index = event.target.getAttribute('index')-0;
                
                arr.splice( index , 1 );

                oTbody.innerHTML = setPage( arr );


            }else if(event.target.getAttribute('name') === 'edit'){
                
                index = event.target.getAttribute('index')-0;

                MsgBox.style.display = 'flex';

                Name.value = arr[index].name;
                Age.value = arr[index].age;
                Phone.value = arr[index].phone;
                Xueli.value = arr[index].xueli;
                Xinzi.value = arr[index].xinzi;
            }
        })


        // 给 修改标签按钮 添加 事件
        Yes.addEventListener('click' , function(){
            
            var bool = window.confirm('您确定要修改吗?');

            if( !bool ) return

            var name = Name.value;
            var phone = Phone.value;
            var age = Age.value;
            var xueli = Xueli.value;
            var xinzi = Xinzi.value


            arr[index].name = name;
            arr[index].age = age;
            arr[index].phone = phone;
            arr[index].xueli = xueli;
            arr[index].xinzi = xinzi;

            oTbody.innerHTML = setPage( arr );

            MsgBox.style.display = 'none';
        })

        No.addEventListener('click' , function(){
            
            MsgBox.style.display = 'none';
        })


        AddYes.addEventListener( 'click' , function(){
            
            if( !window.confirm('您确定要新增吗?') ) return

            var name = AddName.value;
            var phone = AddPhone.value;
            var age = AddAge.value;
            var xueli = AddXueli.value;
            var xinzi = AddXinzi.value;

         
            arr.push(  {
                id:arr[arr.length-1].id+1,
                name,
                phone,
                age,
                xueli,
                xinzi,
            } )

            oTbody.innerHTML = setPage( arr );


        })
    </script>
</body>
</html>